//弹框组件
//调用 $.modal("内容")
$.modal = function(str){
	var style = $("style[modal-box]");
	if(style.length==0){
		var css = `
		<style modal-box>
		.modal{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 80%;
			height: 80%;
			min-width:500px;
			min-height:300px;
			z-index: 999;
		    padding-top: 0.4rem;
		    border:1px solid #18ABE8;
		    box-shadow: 0 0 6px rgba(0,0,0,0.5);
		    border-radius: 3px;
		    overflow: hidden;
			background: #12296D;
			transform:translateZ(0);
		}
		.modal-center{
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
		}
		.modal-top{
			position: absolute;
			width: 100%;
			top:0;
			left: 0;
			height: 0.4rem;
			background: #000;
		}
		.modal-title{
			float: left;
			min-width: 50%;
			height: 100%;
			color: #B4D5FF;
		    font-size: 0.26rem;
		    line-height: 0.4rem;
		    padding-left: 0.2rem;
		    cursor:move;
		    background:url(images/childtitle.png) center/100% 100% no-repeat; 
		}
		.modal-close{
			line-height: 0.35rem;
			width: 0.4rem;
			text-align: center;
			font-size: 0.3rem;
			color: #fff;
			float: right;
		}
		.modal-body{
			overflow:auto;
			color:#fff;
		}
		.modal-resize{
			width: 0.3rem;
			height: 0.3rem;
			background: #eee;
			position: absolute;
			bottom:0;
			right: 0;
			-webkit-transform: rotate(45deg) translate(0.25rem);
			transform: rotate(45deg) translateX(0.25rem);
			cursor:nw-resize;
		}
		</style>`;
		$("head").append(css);
	}


	var html = `
		<div class="modal modal-center" modal-box>
			<div class="modal-top">
				<div class="modal-title">标题</div>
				<div class="modal-close">&times;</div>
			</div>
			<div class="modal-body"></div>
			<div class="modal-resize"></div>
		</div>
	`;
	var box = $('<div/>').append(html).find('[modal-box]');
    $('body').append(box);
    box.find('.modal-body').html(str||'');
    box.css({left:box.offset().left, top:box.offset().top}).removeClass("modal-center");
    box.find('.modal-close').click(function(){
    	box.remove()
    })
    //拖拽
    var tit = box.find('.modal-title');
    tit.mousedown(function(e){
    	var left = parseFloat(box.css("left"));
    	var top = parseFloat(box.css("top"));
    	var x = e.clientX;
    	var y = e.clientY;
    	$(document).mousemove(function(ev){
        	var x1 = ev.clientX;
        	var y1 = ev.clientY;
        	box.css({left:left+x1-x, top:top+y1-y});
    	})
    })
    //尺寸变化
    var resize = box.find('.modal-resize');
    resize.mousedown(function(e){
    	var width = box.width();
    	var height =  box.height();
    	var x = e.clientX;
    	var y = e.clientY;
    	$(document).mousemove(function(ev){
        	var x1 = ev.clientX;
        	var y1 = ev.clientY;
        	box.width(width+x1-x).height(height+y1-y);
    	})
    })
    //清除鼠标移动事件
    $(document).mouseup(function(e){
    	$(document).off('mousemove')
    })
}	



//提示框
//调用： $.msgtip('提示内容',200,300)  其中 200,300是显示坐标，不填则居中
//关闭： $.msgtipClose()
$.msgtip = function(str,left,top){
	var msgtip = $(".msgtip");
	if(msgtip.length == 0){
		$('head').append(
			`
			<style>
			[msg-tip]{
				position: fixed;
				padding:15px 30px;
				background: rgba(0,0,0,0.7);
				border-radius: 3px;
				transform:translateZ(0);
				z-index: 999;
			}	
			[msg-tip].center{
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			</style>
			`
		);
		$('body').append('<div class="msgtip center" msg-tip>'+str+'</div>');
		msgtip = $(".msgtip");
		msgtip.css({
			left: left != null ? left : msgtip.offset().left, 
			top: top != null ? top : msgtip.offset().top
		}).removeClass('center');
	}else{
		msgtip.html(str).show()
		if(left != null) msgtip.css({left:left});
		if(top != null) msgtip.css({top:top});
	}
}
$.msgtipClose = function(){
	$(".msgtip").hide();
}





//窗口个数渲染函数
$.winNum = function(el,n,arr){
	var arr = arr || [];
	var style = $("style[win-num]");
	if(style.length == 0){
		var css = `
		<style win-num>
		.md_win_num{
			padding:0.05rem 0 0 0.1rem;
			height: 100%;
			width: 100%;
		}	
		.md_win_num li{
			float: left;
			margin:0.05rem 0.03rem 0 0;
			height: 0.26rem;
			width: 0.26rem;
			border-radius: 50%;
			color: #fff;
			line-height: 0.28rem;
			text-align: center;
			font-size: 0.12rem;
			background: #00917D;
		}
		.md_win_num .active{
			background: #0B3991;
		}
		</style>`;
		$("head").append(css);
	}
    var html = '<ul class="md_win_num">';
    for(var i=0; i<n; i++){
    	var act = "";
    	if(arr.indexOf(i+1) != -1){
    		act = 'active'
    	}
    	html += '<li class="'+act+'">'+(i+1)+'</li>'
    }
    html += "</ul>";
    return $(el).html(html).find('.md_win_num');
}